<template>
  <div>
    <div class="reg_box1">
      <img src="@/assets/img/bg_1@2x.png" alt="" />
      <div class="reg_box1_title">已退号</div>
    </div>
    <div class="reg_box2">
      <div class="title_box"><span class="dot"></span>就诊人信息</div>
      <div class="info_box">
        <div class="left">就诊人：</div>
        <div class="right">
          {{ detail.name }}
          {{ " " + detail.sex == 1 ? "男" : "女" }}
        </div>
      </div>
      <div class="info_box">
        <div class="left">证件号：</div>
        <div class="right">{{ detail.idNo }}</div>
      </div>
      <div class="info_box">
        <div class="left">手机号：</div>
        <div class="right">{{ detail.operMobile }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>预约信息</div>
      <div class="info_box">
        <div class="left">医院：</div>
        <div class="right">中国医科大学附属口腔医院({{detail.hospitalName}})</div>
      </div>
      <div class="info_box" v-if="info.pactname == '智慧医院'">
        <div class="left">医院地址：</div>
        <div class="right">{{ detail.hospSeeDoctAddr }}</div>
      </div>
      <div class="info_box">
        <div class="left">预约科室：</div>
        <div class="right">{{ detail.deptName }}</div>
      </div>
      <div class="info_box" v-if="info.pactname == '智慧医院'">
        <div class="left">诊室：</div>
        <div class="right">{{ detail.roomName }}</div>
      </div>
      <div class="info_box">
        <div class="left">医生姓名：</div>
        <div class="right">{{ detail.doctorName }}</div>
      </div>
      <div class="info_box">
        <div class="left">就诊时间：</div>
        <div class="right">
          <span v-if="info.pactname == '智慧医院'">
            {{ detail.regDate }} {{ "(" + detail.hospGetregDate + ")" }}</span>
          <span v-else>
            {{ detail.regDate }}
          </span>
        </div>
      </div>
      <div class="info_box">
        <div class="left">门 诊 号 ：</div>
        <div class="right">{{ detail.hospPatientId }}</div>
      </div>
      <div class="info_box">
        <div class="left">挂号方式：</div>
        <div class="right">{{ detail.pactname || "智慧医院" }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>订单信息</div>

      <template v-if="info.pactname == '智慧医院'">

        <div class="info_box">
          <div class="left">订单编号：</div>
          <div class="right">{{ detail.payOrderId }}</div>
        </div>
        <div class="info_box">
          <div class="left">下单时间：</div>
          <div class="right">{{ detail.createTime }}</div>
        </div>
        <div class="info_box">
          <div class="left">总计金额：</div>
          <div class="right">
            ￥{{ detail.totalFee / 100 }}
<!--            （挂号费￥0 检查费￥{{-->
<!--                detail.treatFee / 100-->
<!--            }}）-->
            <br />
            <span style="color: red; font-size: 13px">退回原支付渠道</span>
          </div>
        </div>
        <div class="info_box">
          <div class="left">支付渠道：</div>
          <div class="right">微信</div>
        </div>
        <div class="info_box">
          <div class="left">支付时间：</div>
          <div class="right">{{ detail.payTime }}</div>
        </div>
        <div class="info_box">
          <div class="left">取消时间：</div>
          <div class="right">{{ detail.cancelDate }}</div>
        </div>

        <div class="info_box">
          <div class="left">取消原因：</div>
          <div class="right">{{ detail.cancelRemark }}</div>
        </div>
      </template>
      <template v-else>
        <div class="info_box">
          <div class="left">总计金额：</div>
          <div class="right">
            ￥{{ detail.regFee }}
            <span style="color: red; font-size: 13px">退回原支付渠道</span>
          </div>
        </div>
        <div class="info_box">
          <div class="left">取消时间：</div>
          <div class="right">{{ detail.cancelDate }}</div>
        </div>
      </template>

    </div>
  </div>
</template>
<script>
import { getOrderRegDetail } from "@/api/api";
export default {
  data() {
    return {
      info: {},
      detail: {},
    };
  },
  created() {
    this.info = this.$route.query;
    // 公众号挂的单才有详情
    if (this.info.pactname == '智慧医院') {
      this.getOrderRegDetail();
    } else {
      console.log(this.info)
      this.detail.name = this.info.name
      this.detail.sex = this.info.sex == '男' ? 1 : 2
      this.detail.idNo = this.info.idenno
      this.detail.operMobile = this.info.homeTel
      this.detail.regDate = this.info.regDate
      this.detail.deptName = this.info.deptname
      this.detail.doctorName = this.info.decpname
      this.detail.regFee = this.info.regFee
      this.detail.operDate = this.info.operDate
      this.detail.pactname = this.info.pactname
      this.detail.hospPatientId = this.info.cardNo
      this.detail.validFlag = this.info.validFlag
      this.detail.cancelDate=this.info.cancelDate
    }

  },
  methods: {
    getOrderRegDetail() {
      var data = {
        orderId: this.info.orderId,
      };
      getOrderRegDetail(data).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
        }
      });
    },
  },
  filters: {
    timefun(time) {
      if (time) {
        var newTime = time.slice(0, 2) + ":" + time.slice(2);
        newTime =
          newTime.slice(0, newTime.length - 2) +
          ":" +
          newTime.slice(newTime.length - 2);
        return newTime;
      }
    },
  },
};
</script>
<style scoped>
.reg_box1 {
  width: 100%;
  height: 142px;
  position: relative;
  color: #fff;
}

.reg_box1>div {
  position: relative;
  margin-left: 16px;
}

.reg_box1 .reg_box1_title {
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 .time {
  font-size: 14px;
  /* font-weight: bold; */
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.reg_box2 {
  width: calc(100% - 64px);
  padding: 16px;
  margin: 0px auto;
  position: relative;
  top: -80px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(7, 62, 145, 0.24);
  border-radius: 5px;
}

.reg_box2 .title_box {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #131a2a;
  line-height: 42px;
}

.reg_box2 .title_box .dot {
  width: 3px;
  height: 15px;
  background: #448eff;
  border-radius: 2px;
  margin-right: 12px;
}

.reg_box2 .info_box {
  display: flex;
  line-height: 26px;
  margin: 5px 0;
}

.reg_box2 .info_box .left {
  width: 80px;
  color: #a4adbe;
  font-size: 14px;
  text-align-last: justify;
}

.reg_box2 .info_box .right {
  width: calc(100% - 80px);
  word-wrap: break-word;
  word-break: normal;
  font-size: 15px;
}

.btn_box {
  height: 55px;
  width: 100%;

  display: flex;
  position: fixed;
  bottom: 0;

  background: #ffffff;
  box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28);
}

.btn_box>div {
  width: 100%;
  height: 100%;
  line-height: 55px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.btn_box .btn_box_1 {
  color: #448eff;
}

.btn_box .btn_box_2 {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  color: #fff;
}
</style>
